<template>
  <view>
    <DoctorList :option="doctor" />
  </view>
</template>

<script>
import DoctorList from './doctor-list.vue'
export default {
  components: {
    DoctorList
  },
  data() {
    return {
      doctor: [],
      id: ''
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getDoctorList()
  },
  methods: {
    async getDoctorList() {
      const {data} = await this.$axios({
        url: '/api/hospital/detail',
        data: {
          id: this.id || 18
        }
      })
      this.doctor = data.doctor
    }
  }
}
</script>

<style lang="scss" scoped>
.doc-item {
  display: flex;
  border-bottom: 2rpx solid rgba(153, 153, 153, 1);
  padding: 22rpx 0;

  .doc-img {
    width: 120rpx;

    .img-box {
      height: 80rpx;
      width: 80rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(153, 153, 153, 0.2);
    }

    image {
      height: 70rpx;
      width: 70rpx;
    }
  }

  .doc-right {
    flex: 1;
    color: rgba(80, 80, 80, 1);

    .doc-name {
      font-size: 32rpx;
      font-weight: bold;
      font-size: 32rpx;
      margin-right: 16rpx;
    }

    .doc-type {
      color: rgba(166, 166, 166, 0.8);
    }

    .allText {
      font-size: 24rpx;
    }

    .doc-infor {
      font-size: 20rpx;
    }

    .doc-hospital {
      margin-right: 22rpx;
    }

    .doc-ach {
      display: flex;
      view {
        .num {
          color: rgba(65, 171, 133, 1);
        }
      }
      view:nth-child(2) {
        margin-left: 30rpx;
      }
    }
  }
}
</style>
